<template>
	<view class="container">
		<view class="h">
			<view class="line"></view>
			<text class="title">可提现余额</text>
		</view>
		<view class="b">
			<view class="number">¥ {{remainAmount}}</view>
			<view class='extractBtn' @tap="extractMoney">
				<text class='btxt'>提现申请</text>
			</view>
		</view>

		<view class='separate'></view>

		<view class='user_area'>
			<view class='user_row' @tap='goExtract'>
				<view class='user_row_left jhx_f4'>我的提现记录</view>
				<text class='user_row_right iconfont icon-jiantou jhx_f6'></text>
			</view>

			<view class='user_column'>
				<view class="item_left">
					<text class="name"> 本月收益</text>
					<text class="money">¥ {{currMonthSettleMoney}}</text>
				</view>
				<view class="item_rigth">
					<text class="name"> 上月收益 </text>
					<text class="money">¥ {{lastMonthSettleMoney}}</text>
				</view>
			</view>

		</view>

		<view class='separate'></view>

		<view class='order_area'>
			<view class='user_row' @tap='goOrderList'>
				<view class='user_row_left jhx_f4'>推广订单明细</view>
				<text class='user_row_right iconfont icon-jiantou jhx_f6'></text>
			</view>

			<view class="chose_type">
				<button class='btn_left' :class="today_type" data-type="1" @tap="switchTabType">
					<text class='chose-p'>今日</text>
				</button>
				<button class='btn_center ' :class="yestoday_type" data-type="2" @tap="switchTabType">
					<text class='chose-p'>昨日</text>
				</button>
				<button class='btn_center ' :class="week_type" data-type="3" @tap="switchTabType">
					<text class='chose-p'>近7日</text>
				</button>
				<button class='btn_rigth ' :class="month_type" data-type="4" @tap="switchTabType">
					<text class='chose-p'>近30日</text>
				</button>
			</view>

			<view class='order_column'>
				<view class="order_column_item">
					<text class="info"> 推广用户数</text>
					<text class="value">{{currType.userCnt}} 个</text>
				</view>
				<view class="order_column_item">
					<text class="info"> 推广订单数 </text>
					<text class="value">{{currType.orderCnt}} 笔</text>
				</view>
			</view>

			<view class='order_column'>
				<view class="order_column_item">
					<text class="info"> 预估收益</text>
					<text class="value">{{currType.orderSettleAmt}} 元</text>
				</view>
				<view class="order_column_item">
					<text class="info"> 预估结算收益 </text>
					<text class="value">{{currType.finalSettleAmt}} 元</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['hasLogin', 'user', 'code'])
		},
		data() {
			return {
				today_type: "active",
				yestoday_type: "disable",
				week_type: "disable",
				month_type: "disable",
			}
		},
		onShow: function() {
			// 页面显示
			//获取用户的登录信息
			if (this.hasLogin) {
				let userInfo = this.user;

				let that = this;
				that.$util.request(that.$api.api.BrokerageMain).then(function(res) {
					if (res.errno === 0) {
						that.totalAmount = res.data.totalAmount;
						that.remainAmount = res.data.remainAmount;
						that.lastMonthSettleMoney = res.data.lastMonthSettleMoney;
						that.currMonthSettleMoney = res.data.currMonthSettleMoney;
						that.currType = res.data.todayData;
						that.todayData = res.data.todayData;
						that.yestodayData = res.data.yestodayData;
						that.weekData = res.data.weekData;
						that.monthData = res.data.monthData;
					}
				});
			}
		},
		methods: {
			switchTabType: function(e) {
				var type = e.currentTarget.dataset.type;
				var currType;
				var today_type = "disable";
				var yestoday_type = "disable";
				var week_type = "disable";
				var month_type = "disable";
				if (type == 1) {
					currType = this.todayData;
					today_type = "active";
				} else if (type == 2) {
					currType = this.yestodayData;
					yestoday_type = "active";
				} else if (type == 3) {
					currType = this.weekData;
					week_type = "active";
				} else if (type == 4) {
					currType = this.monthData;
					month_type = "active";
				}
				this.currType=currType;
					this.today_type= today_type;
					this.yestoday_type= yestoday_type;
					this.week_type= week_type;
					this.month_type= month_type;
			},
			goOrderList: function() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: "../order/order"
					});
				} else {
					uni.navigateTo({
						url: "../../auth/login/login"
					});
				}
			},
			goExtract: function() {
				if (this.hasLogin) {
					uni.navigateTo({
						url: "../record/record"
					});
				} else {
					uni.navigateTo({
						url: "../../auth/login/login"
					});
				}
			},
			extractMoney: function() {
				if (this.hasLogin) {
					if (this.remainAmount >= 1) {
						uni.navigateTo({
							url: "../withdrawal/withdrawal?remainAmount=" + this.remainAmount
						});
					} else {
						uni.showModal({
							title: '提示',
							content: '您的可提现金额小于1元，暂时无法申请提现！',
							showCancel: false,
							success(res) {
								//暂时不做处理
							}
						});
					}
				} else {
					uni.navigateTo({
						url: "../../auth/login/login"
					});
				}
			}
		}
	}
</script>

<style>
	.container {
		margin-bottom: 100rpx;
		width: 750rpx;
		height: auto;
		overflow: hidden;
	}

	.container .h {
		position: relative;
		height: 145.5rpx;
		width: 750rpx;
		padding: 56.25rpx 0;
		background: #fff;
		text-align: center;
	}

	.container .h .line {
		display: inline-block;
		position: absolute;
		top: 72rpx;
		left: 0;
		z-index: 2;
		height: 1px;
		margin-left: 125rpx;
		width: 500rpx;
		background: #ccc;
	}

	.container .h .title {
		display: inline-block;
		position: absolute;
		top: 56.125rpx;
		left: 0;
		z-index: 3;
		height: 33rpx;
		margin-left: 285rpx;
		width: 180rpx;
		background: #fff;
	}

	.container .b {
		width: 750rpx;
		height: auto;
		overflow: hidden;
		padding: 0rpx 30rpx;
		background: #fff;
	}

	.container .number {
		height: auto;
		overflow: hidden;
		padding-bottom: 25rpx;
		text-align: center;
		font-size: 88rpx;
		color: #e62222;
	}

	.extractBtnss {
		width: 60%;
		height: 80rpx;
		margin-top: 20rpx;
		background-color: #85c43f;
		border-radius: 98rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-bottom: 40rpx;
	}

	.extractBtn {
		background-color: #85c43f;
		font-size: 32rpx;
		color: #fff;
		width: 560rpx;
		height: 90rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 90rpx;
		margin: 36rpx auto 40rpx auto;
	}

	.extractBtn .btxt {
		color: #fff;
		font-size: 42rpx;
	}

	.btn::after {
		border-radius: 98rpx;
		border: 0;
	}

	.user_area {
		width: 100%;
		height: 246rpx;
		margin-top: 5rpx;
		background: #fff;
		border-top: 8rpx solid #f4f4f4;
	}

	.user_row {
		/* border: 1px solid black; */
		height: 86rpx;
		line-height: 86rpx;
		border-bottom: 1px solid #eaeaea;
	}

	.user_row_left {
		/* border: 1px solid #757575; */
		float: left;
		height: 86rpx;
		line-height: 86rpx;
		margin-left: 35rpx;
		letter-spacing: 1rpx;
	}

	.user_row_right {
		/* border: 1px solid #757575; */
		float: right;
		height: 40rpx;
		width: 40rpx;
		font-weight: 550;
		line-height: 86rpx;
		margin-right: 30rpx;
	}

	.user_column {
		/* border: 1px solid black; */
		height: 190rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-right: 30rpx;
		line-height: 190rpx;
		padding-bottom: 40rpx;
		margin-bottom: 40rpx;
	}


	.item_left {
		padding-top: 12rpx;
		height: 115rpx;
		width: 50%;
		float: left;
		text-align: center;
		position: relative;
		border-right: 1rpx solid #eaeaea;
	}

	.item_rigth {
		padding-top: 12rpx;
		height: 115rpx;
		width: 50%;
		text-align: center;
		position: relative;
		float: right;
	}

	.user_column .name {
		display: block;
		height: 45rpx;
		line-height: 45rpx;
		color: #999;
		font-size: 32.5rpx;
		margin-bottom: 15rpx;
	}

	.user_column .money {
		display: block;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
		margin-bottom: 10rpx;
		color: #333;
		font-size: 32rpx;
	}

	.order_area {
		width: 100%;
		height: 520rpx;
		margin-top: 5rpx;
		background: #fff;
		border-top: 8rpx solid #f4f4f4;
	}

	.chose_type {
		height: 80rpx;
		line-height: 80rpx;
		margin: 40rpx;
	}

	.chose-p {
		line-height: 40rpx;
		width: 100%;
		height: 40rpx;
	}

	.btn_left {
		line-height: 60rpx;
		height: 60rpx;
		width: 24%;
		text-align: center;
		float: left;
		align-items: center;
	}

	.active {
		background-color: #85c43f;
	}

	.active text {
		color: #fff;
	}

	.disable {
		background-color: #FFF;
	}

	.disable text {
		color: #999;
	}

	.btn_center {
		line-height: 60rpx;
		height: 60rpx;
		width: 25%;
		text-align: center;
		float: left;
		border-radius: 0;
		align-items: center;
	}

	.btn_rigth {
		line-height: 60rpx;
		height: 60rpx;
		width: 25%;
		text-align: center;
		float: left;
		align-items: center;
	}

	.order_area button {
		border-radius: 0;
		border: 1rpx solid #eaeaea;
		margin-right: -1rpx;
	}

	.order_area button::after {
		border-radius: 0;
	}

	button.btn_left {
		border-radius: 0;
		border-top-left-radius: 98rpx;
		border-bottom-left-radius: 98rpx;
	}

	button.btn_left::after {
		border-radius: 0;
		border-top-left-radius: 98rpx;
		border-bottom-left-radius: 98rpx;
	}

	button.btn_rigth {
		border-radius: 0;
		border-top-right-radius: 98rpx;
		border-bottom-right-radius: 98rpx;
	}

	button.btn_rigth::after {
		border-radius: 0;
		border-top-right-radius: 98rpx;
		border-bottom-right-radius: 98rpx;
	}

	.order_column {
		height: 120rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-right: 30rpx;
		line-height: 100rpx;
		padding-bottom: 20rpx;
		margin-bottom: 20rpx;
	}

	.order_column_item {
		width: 50%;
		height: 100rpx;
		background: #fff;
		text-align: center;
		position: relative;
	}

	.order_column_item .info {
		display: block;
		height: 45rpx;
		line-height: 45rpx;
		color: #999;
		font-size: 30.5rpx;
		margin-bottom: 15rpx;
	}

	.order_column_item .value {
		display: block;
		height: 30rpx;
		line-height: 30rpx;
		margin-bottom: 10rpx;
		color: #000;
		font-size: 34rpx;
	}
</style>
